<template>
  <div class="script-card terminal-card" @click="handleClick">
    <!-- 终端窗口头部 -->
    <div class="terminal-header">
      <div class="terminal-controls">
        <div class="control-btn close"></div>
        <div class="control-btn minimize"></div>
        <div class="control-btn maximize"></div>
      </div>
      <div class="terminal-title">{{ script.fileName }}</div>
    </div>

    <!-- 终端内容 -->
    <div class="terminal-content">
      <!-- 命令行提示符 -->
      <div class="command-line">
        <span class="prompt">[root@echo ~]#</span>
        <span class="command">ls -la {{ script.fileName }}</span>
      </div>

      <!-- 文件信息输出 -->
      <div class="file-info">
        <div class="file-permissions">-rwxr-xr-x</div>
        <div class="file-owner">user</div>
        <div class="file-group">group</div>
        <div class="file-size">{{ formatFileSize(script.fileSize) }}</div>
        <div class="file-date">{{ formatDate(script.createdTime) }}</div>
        <div class="file-name">{{ script.fileName }}</div>
      </div>

      <!-- 执行命令 -->
      <div class="command-line">
        <span class="prompt">[root@echo ~]#</span>
        <span class="command">./{{ script.fileName }} --help</span>
      </div>

      <!-- 命令输出 -->
      <div class="command-output">
        <div class="output-line">
          <span class="output-text">{{ script.name }}</span>
        </div>
        <div class="output-line">
          <span class="output-text">Description: {{ script.description }}</span>
        </div>
        <div class="output-line">
          <span class="output-text">Status: </span>
          <span class="status-badge" :class="script.status">
            {{ script.status === 'active' ? '● Active' : '○ Maintenance' }}
          </span>
        </div>
        <div class="output-line">
          <span class="output-text">Systems: </span>
          <span class="systems-list">
            {{ systemsArray.join(', ') }}
          </span>
        </div>
        <div class="output-line">
          <span class="output-text">Features: </span>
          <span class="features-list">
            {{ featuresArray.join(', ') }}
          </span>
        </div>
        <div class="output-line">
          <span class="output-text">Tech Stack: </span>
          <span class="tech-list">
            {{ techStackArray.join(', ') }}
          </span>
        </div>
      </div>

      <!-- 光标闪烁效果 -->
      <div class="cursor-blink">_</div>
    </div>

    <!-- 悬停效果 -->
    <div class="card-hover">
      <div class="hover-content">
        <div class="hover-icon">💻</div>
        <div class="hover-text">执行脚本</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineOptions, computed } from 'vue';

  defineOptions({
    name: 'TerminalCard',
  });

  interface Script {
    id: number;
    name: string;
    fileName: string;
    fileSize: number;
    description: string;
    icon: string;
    color: string;
    status: string;
    systems: string;
    features: string;
    techStack: string;
    createdTime: string;
  }

  interface Props {
    script: Script;
  }

  interface Emits {
    (e: 'click', script: Script): void;
  }

  const props = defineProps<Props>();
  const emit = defineEmits<Emits>();

  // 解析JSON字符串
  const parseJsonArray = (jsonString: string): string[] => {
    try {
      if (!jsonString) {
        console.log('🔍 TerminalCard - JSON字符串为空:', jsonString);
        return [];
      }
      console.log('🔍 TerminalCard - 解析JSON字符串:', jsonString);
      const result = JSON.parse(jsonString);
      console.log('✅ TerminalCard - JSON解析结果:', result);
      return result;
    } catch (error) {
      console.error('❌ TerminalCard - 解析JSON失败:', error, '原始字符串:', jsonString);
      return [];
    }
  };

  // 计算属性：解析后的数组
  const systemsArray = computed(() => {
    console.log('🔍 TerminalCard - 解析systems:', props.script.systems);
    return parseJsonArray(props.script.systems);
  });
  const featuresArray = computed(() => {
    console.log('🔍 TerminalCard - 解析features:', props.script.features);
    return parseJsonArray(props.script.features);
  });
  const techStackArray = computed(() => {
    console.log('🔍 TerminalCard - 解析techStack:', props.script.techStack);
    return parseJsonArray(props.script.techStack);
  });

  // 格式化文件大小
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
  };

  // 格式化日期
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    });
  };

  // 点击处理
  const handleClick = () => {
    emit('click', props.script);
  };
</script>

<style scoped lang="scss">
  /* 脚本卡片 */
  .script-card {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    height: 444px;
    display: flex;
    flex-direction: column;
    min-width: 360px;
    width: 100%;
  }

  .script-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border-color: rgba(24, 144, 255, 0.4);
  }

  /* 终端窗口头部 */
  .terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
  }

  .terminal-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .control-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .control-btn.close {
    background: #ff5f56;
    box-shadow: 0 0 8px rgba(255, 95, 86, 0.4);
  }

  .control-btn.minimize {
    background: #ffbd2e;
    box-shadow: 0 0 8px rgba(255, 189, 46, 0.4);
  }

  .control-btn.maximize {
    background: #27ca3f;
    box-shadow: 0 0 8px rgba(39, 202, 63, 0.4);
  }

  .control-btn:hover {
    transform: scale(1.2);
  }

  .terminal-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    flex: 1;
    margin: 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 终端内容 */
  .terminal-content {
    padding: 1rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
  }

  /* 命令行提示符 */
  .command-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    animation: fadeInUp 0.5s ease-out;
  }

  .prompt {
    color: #00ff00;
    font-size: 0.85rem;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.5);
    flex-shrink: 0;
  }

  .command {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border-left: 2px solid #00ff00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }

  /* 文件信息输出 */
  .file-info {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp 0.6s ease-out;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .file-permissions {
    color: #ffd700;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
  }

  .file-owner {
    color: #87ceeb;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  .file-group {
    color: #98fb98;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  .file-size {
    color: #ffa500;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
  }

  .file-date {
    color: #dda0dd;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  .file-name {
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }

  /* 命令输出 */
  .command-output {
    margin-bottom: 0.8rem;
    animation: fadeInUp 0.7s ease-out;
    flex: 1;
    overflow: hidden;
  }

  .output-line {
    margin-bottom: 0.3rem;
    padding: 0.15rem 0;
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .output-line:hover {
    border-left-color: #00ff00;
    background: rgba(0, 255, 0, 0.05);
    padding-left: 0.4rem;
  }

  .output-text {
    color: #e0e0e0;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
  }

  .status-badge.active {
    background: linear-gradient(135deg, #00ff00 0%, #00cc00 100%);
    border: 1px solid #00ff00;
    color: #000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  }

  .status-badge.maintenance {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    border: 1px solid #ffd700;
    color: #000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  }

  .systems-list {
    color: #87ceeb;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .features-list {
    color: #98fb98;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tech-list {
    color: #dda0dd;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 光标闪烁效果 */
  .cursor-blink {
    color: #00ff00;
    font-size: 0.9rem;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
    animation: blink 1.2s step-end infinite;
    margin-top: 0.3rem;
    flex-shrink: 0;
  }

  /* 悬停效果 */
  .card-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    border-radius: 12px;
  }

  .script-card:hover .card-hover {
    opacity: 1;
  }

  .hover-content {
    text-align: center;
    color: white;
    animation: pulse 2s infinite;
  }

  .hover-icon {
    font-size: 2.2rem;
    margin-bottom: 0.6rem;
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.5));
  }

  .hover-text {
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  /* 动画 */
  @keyframes blink {
    0%,
    50% {
      opacity: 1;
    }
    51%,
    100% {
      opacity: 0;
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.03);
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .script-card {
      height: 420px;
    }

    .terminal-content {
      padding: 0.8rem;
    }

    .file-info {
      gap: 0.6rem;
      flex-wrap: wrap;
    }
  }
</style>
